<template>
  <div class="dashboard">
    <div class="page-header">
      <h1>AI测试助手</h1>
      <p>欢迎使用基于AI的需求分析和测试用例生成系统</p>
    </div>

    <el-row :gutter="20">
      <!-- 快速操作卡片 -->
      <el-col :span="8">
        <el-card class="quick-action-card">
          <template #header>
            <div class="card-header">
              <span>需求分析</span>
              <el-icon><TrendCharts /></el-icon>
            </div>
          </template>
          <div class="card-content">
            <p>上传需求文档或输入文本，AI将帮您识别模糊点和潜在风险</p>
            <el-button type="primary" @click="goToAnalysis">开始分析</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="quick-action-card">
          <template #header>
            <div class="card-header">
              <span>测试用例生成</span>
              <el-icon><List /></el-icon>
            </div>
          </template>
          <div class="card-content">
            <p>基于需求文档自动生成详细的测试用例，提高测试效率</p>
            <el-button type="success" @click="goToTestCases">生成用例</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="quick-action-card">
          <template #header>
            <div class="card-header">
              <span>需求管理</span>
              <el-icon><Document /></el-icon>
            </div>
          </template>
          <div class="card-content">
            <p>管理您的需求项目，跟踪测试用例和执行结果</p>
            <el-button type="warning" @click="goToRequirements">管理需求</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 功能特点 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :span="24">
        <el-card>
          <template #header>
            <h3>功能特点</h3>
          </template>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="feature-item">
                <el-icon size="30" color="#409EFF"><Upload /></el-icon>
                <h4>多格式支持</h4>
                <p>支持PDF、Word、Excel、PowerPoint等多种文件格式</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="feature-item">
                <el-icon size="30" color="#67C23A"><Cpu /></el-icon>
                <h4>AI智能分析</h4>
                <p>基于先进的AI技术，智能识别需求模糊点和潜在风险</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="feature-item">
                <el-icon size="30" color="#E6A23C"><Lightning /></el-icon>
                <h4>快速生成</h4>
                <p>一键生成高质量测试用例，大幅提升测试效率</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="feature-item">
                <el-icon size="30" color="#F56C6C"><DataBoard /></el-icon>
                <h4>项目管理</h4>
                <p>完整的需求和测试用例管理功能，支持团队协作</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 使用统计 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <h3>使用统计</h3>
          </template>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-value">{{ stats.totalAnalysis || 0 }}</div>
              <div class="stat-label">需求分析次数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ stats.totalTestCaseGeneration || 0 }}</div>
              <div class="stat-label">用例生成次数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ stats.totalTestCases || 0 }}</div>
              <div class="stat-label">测试用例数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ stats.totalRequirements || 0 }}</div>
              <div class="stat-label">需求项目</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ stats.totalUiScripts || 0 }}</div>
              <div class="stat-label">UI脚本数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ stats.totalApiInterfaces || 0 }}</div>
              <div class="stat-label">API接口数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ stats.totalScenarios || 0 }}</div>
              <div class="stat-label">测试场景数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ (stats.totalUiExecutions || 0) + (stats.totalScenarioExecutions || 0) }}</div>
              <div class="stat-label">执行次数</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <template #header>
            <h3>最近活动</h3>
          </template>
          <div class="activity-list">
            <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
              <el-icon :color="activity.color"><component :is="activity.icon" /></el-icon>
              <div class="activity-content">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-time">{{ formatTime(activity.time) }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useToast } from 'vue-toastification'
import dayjs from 'dayjs'
import { dashboardApi } from '@/api/dashboard'

const router = useRouter()
const authStore = useAuthStore()
const toast = useToast()

// 统计数据
const stats = ref({
  totalAnalysis: 0,
  totalTestCaseGeneration: 0,
  totalTestCases: 0,
  totalRequirements: 0,
  totalFiles: 0,
  totalUiScripts: 0,
  totalApiInterfaces: 0,
  totalScenarios: 0,
  totalUiExecutions: 0,
  totalScenarioExecutions: 0
})

// 最近活动
const recentActivities = ref([])

// 页面跳转方法
const goToAnalysis = () => {
  router.push('/analysis')
}

const goToTestCases = () => {
  router.push('/analysis')  // 统一跳转到AI助手页面
}

const goToRequirements = () => {
  router.push('/requirements')
}

// 时间格式化
const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm')
}

// 加载统计数据
const loadStats = async () => {
  try {
    const response = await dashboardApi.getStats()
    console.log('Dashboard API response:', response)
    if (response && response.data) {
      // 检查返回的数据结构
      if (response.data.success && response.data.data) {
        stats.value = response.data.data
      } else {
        stats.value = response.data
      }
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
    toast.error('加载统计数据失败')
  }
}

// 加载最近活动
const loadRecentActivities = async () => {
  try {
    const response = await dashboardApi.getRecentActivities()
    console.log('Activities API response:', response)
    if (response && response.data) {
      // 检查返回的数据结构
      if (response.data.success && response.data.data) {
        recentActivities.value = response.data.data.items || response.data.data
      } else {
        recentActivities.value = response.data.items || response.data
      }
    }
  } catch (error) {
    console.error('加载最近活动失败:', error)
    toast.error('加载最近活动失败')
  }
}

onMounted(() => {
  loadStats()
  loadRecentActivities()
})
</script>

<style lang="scss" scoped>
.dashboard {
  padding: 20px;
}

.quick-action-card {
  margin-bottom: 20px;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
  }
  
  .card-content {
    text-align: center;
    
    p {
      margin-bottom: 20px;
      color: #666;
      line-height: 1.6;
    }
  }
}

.feature-item {
  text-align: center;
  padding: 20px;
  
  h4 {
    margin: 15px 0 10px 0;
    color: #303133;
  }
  
  p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  
  .stat-item {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    
    .stat-value {
      font-size: 28px;
      font-weight: bold;
      color: #409EFF;
      margin-bottom: 8px;
    }
    
    .stat-label {
      color: #666;
      font-size: 14px;
    }
  }
}

.activity-list {
  .activity-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .activity-content {
      margin-left: 12px;
      flex: 1;
      
      .activity-title {
        font-size: 14px;
        color: #303133;
        margin-bottom: 4px;
      }
      
      .activity-time {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

.mt-20 {
  margin-top: 20px;
}
</style> 